<template>
	<view>
		<u-row>
			<u-col :span="6">
				<view v-if="isActivity == false" style="margin: 0 auto;width: 99%;"><u-button text="创建活动" @click="startActivity"></u-button></view>
				<view v-if="isActivity == true" style="margin: 0 auto;width: 99%;"><u-button type="error" :plain="true" text="创建活动"></u-button></view>
			</u-col>
			<u-col :span="6">
				<view v-if="isActivity == true" style="margin: 0 auto;width: 99%;"><u-button text="创建团队" @click="startTeam"></u-button></view>
				<view v-if="isActivity == false" style="margin: 0 auto;width: 99%;"><u-button type="error" :plain="true" text="创建团队"></u-button></view>
			</u-col>
		</u-row>
		
		<view style="margin-top: 10px;" v-if="isActivity == true">
			<view style="padding: 5px 5px 0px 5px">
				
				<view style="padding: 0">
					<u-row>
						<u-col :span="10">
							活动封面
						</u-col>
						<u-col :span="2">
							<view class="myAvatar" :style="{backgroundImage: 'url(' + newAudit.avatar + ')'}" @click="updateNewAuditImg">
							</view>
							
						</u-col>
					</u-row>
				</view>
				
				<u-line margin="5px 0"></u-line>
				
				<u--form
						labelPosition="left"
						:model="newAudit"
						:rules="rules"
						ref="uForm"
						labelWidth="150"
				>	
					<u-form-item
							label="活动名称:"
							prop="title"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="newAudit.title"
								placeholder="请输入活动名称"
								border="none"
						></u--input>
					</u-form-item>
					
					<u-form-item
							label="活动地点:"
							prop="location"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="newAudit.location"
								placeholder="请输入活动地点"
								border="none"
						></u--input>
					</u-form-item>
					
					<u-form-item
							label="最大人数:"
							prop="maxNum"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="newAudit.maxNum"
								placeholder="请输入最大人数"
								border="none"
						></u--input>
					</u-form-item>
					
					<u-form-item
							label="活动积分:"
							prop="score"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="newAudit.score"
								placeholder="请输入活动积分"
								border="none"
						></u--input>
					</u-form-item>
					
					<u-form-item
							label="活动描述:"
							prop="description"
							borderBottom
							ref="item1"
							labelPosition="top"
					>
						<textarea v-model="newAudit.description" placeholder="请输入活动描述" :maxlength="150" style="height: 50px;width: 90%;padding: 3px;border: 1px rgb(214, 215, 217) solid;"></textarea>
					</u-form-item>
				</u--form>
				
				<view style="padding: 13px 20px 0 0" @click="tagsShow = true">
					<u-row>
						<u-col :span="11">
							{{tagsName}}
						</u-col>
						<u-col :span="1">
							<view style="float: right;">
							   >	
							</view>
						</u-col>
					</u-row>
					
				</view>
				<u-line margin="15px 0"></u-line>
				
				<view style="padding: 0px 20px 0 0" @click="startShow = true">
					<u-row>
						<u-col :span="11">
							{{startTimeName}}
						</u-col>
						<u-col :span="1">
							<view style="float: right;">
							   >	
							</view>
						</u-col>
					</u-row>
					
				</view>
				<u-line margin="15px 0"></u-line>
				
				<view style="padding: 0px 20px 0 0" @click="endShow = true">
					<u-row>
						<u-col :span="11">
							{{endTimeName}}
						</u-col>
						<u-col :span="1">
							<view style="float: right;">
							   >	
							</view>
						</u-col>
					</u-row>
					
				</view>
				<u-line margin="15px 0 0px 0"></u-line>
			</view>
			
			<u-button type="primary" @click="submitActivity">提交</u-button>
			<view style="height: 90px;"></view>
			
			 <u-datetime-picker
					:show="startShow"
					v-model="newAudit.startTime"
					mode="datetime"
					:minDate="Number(new Date()) + 100000"
					@cancel="startClose"
					@confirm="selectStart"
			></u-datetime-picker>
			
			<u-datetime-picker
					:show="endShow"
					v-model="newAudit.endTime"
					mode="datetime"
					:minDate="Number(new Date()) + 100000"
					@cancel="endClose"
					@confirm="selectEnd"
			></u-datetime-picker>
			
			<u-picker :show="tagsShow" :columns="tagsColumns" @cancel="tagsClose" keyName="label"
					@confirm="selectTags" itemHeight="60"></u-picker>
		
		</view>
		
		<!-- 新增团队 -->
		<view style="margin-top: 10px;" v-if="isActivity == false">
			<view style="padding: 5px 5px 0px 5px">
				<view style="padding: 0">
					<u-row>
						<u-col :span="10">
							团队封面
						</u-col>
						<u-col :span="2">
							<view class="myAvatar" :style="{backgroundImage: 'url(' + newTeam.avatar + ')'}" @click="updateNewTeamImg">
							</view>
							
						</u-col>
					</u-row>
				</view>
				
				<u-line margin="5px 0"></u-line>
				<u--form
						labelPosition="left"
						:model="newTeam"
						:rules="rules2"
						ref="uForm2"
						labelWidth="150"
				>
					<u-form-item
							label="团队名称:"
							prop="title"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="newTeam.title"
								placeholder="请输入团队名称"
								border="none"
						></u--input>
					</u-form-item>
					
					<u-form-item
							label="最大人数:"
							prop="maxNum"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="newTeam.maxNum"
								placeholder="请输入最大人数"
								border="none"
						></u--input>
					</u-form-item>
					
					<u-form-item
							label="团队宣言:"
							prop="aim"
							borderBottom
							ref="item1"
							labelPosition="top"
					>
						<textarea v-model="newTeam.aim" placeholder="请输入团队宣言" :maxlength="150" style="height: 50px;width: 90%;padding: 3px;border: 1px rgb(214, 215, 217) solid;"></textarea>
					</u-form-item>
				</u--form>
				
			</view>
			<u-button type="primary" @click="submitTeam">提交</u-button>
		</view>
		
		
		<tab-bar :currentPage="2"></tab-bar>
	</view>
</template>

<script>
import moment from 'moment'
import { addActivityApi } from '../../../utils/activity'
import { addTeamApi, getMyTeamByUserIdApi } from '../../../utils/team'
import axios from 'axios'
	export default{
		data(){
			return{
				isActivity:true,
				startShow: false,
				endShow: false,
				tagsShow: false,
				tagsName: '活动范围',
				startTimeName: '开始时间',
				endTimeName: '结束时间',
				teamList: [],
				newTeam: {
					title: '',
					aim:'',
					maxNum: undefined,
					avatar: '../../../static/updateImg.png',
				},
				rules2: {
					'title':  {
						type: 'string',
						required: true,
						message: '请输入团队名称',
						trigger: ['blur', 'change']
					},
					'maxNum': {
						type: 'string',
						required: true,
						message: '请输入最大人数',
						trigger: ['blur', 'change']
					},
				},
				newAudit: {
					location: '',
					maxNum: undefined,
					tags:'公共',
					description: '',
					title: '',
					startTime: 0,
					endTime: 0,
					score: undefined,
					avatar: '../../../static/updateImg.png',
				},
				tagsColumns:[
                    [{
                        label: '公共',
                        // 其他属性值
                        id: 0
                        // ...
                    }]
                ],
				rules: {
					'title': {
						type: 'string',
						required: true,
						message: '请输入活动名称',
						trigger: ['blur', 'change']
					},
					'location': {
						type: 'string',
						required: true,
						message: '请输入活动地点',
						trigger: ['blur', 'change']
					},
					'maxNum': {
						type: 'string',
						required: true,
						message: '请输入最大人数',
						trigger: ['blur', 'change']
					},
					'score': {
						type: 'string',
						required: true,
						message: '请输入活动积分',
						trigger: ['blur', 'change']
					},
					'description': {
						type: 'string',
						required: true,
						message: '请输入活动描述',
						trigger: ['blur', 'change']
					},
					
				},
				
			}
		},
		methods:{
			startActivity(){
				this.isActivity = true
			},
			startTeam(){
				this.isActivity = false
			},
			
			selectStart(value){
				this.startShow = false
				this.newAudit.startTime = moment(value.value).format()
				this.startTimeName = this.newAudit.startTime
			},
			startClose(){
				this.startShow = false
			},
			
			selectEnd(value){
				this.endShow = false
				this.newAudit.endTime = moment(value.value).format()
				this.endTimeName = this.newAudit.endTime 
			},
			endClose(){
				this.endShow = false
			},
			
			tagsClose(){
				this.tagsShow = false
			},
			selectTags(value){
				this.tagsShow = false
				this.tagsName = value.value[0].label
				this.newAudit.tags = value.value[0].id
			},
			
			reset(){
				this.$refs.uForm.resetFields()
				this.newAudit.startTime = 0
				this.newAudit.endTime = 0
				setTimeout(()=>{
					this.$refs.uForm.clearValidate()
				},100)
				
			},
			reset2(){
				this.$refs.uForm2.resetFields()
				setTimeout(()=>{
					this.$refs.uForm2.clearValidate()
				},100)
			},
			
			updateNewAuditImg(){
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						
						uni.uploadFile({
							url: 'http://121.37.0.16:8080/api/file/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let a = JSON.parse(uploadFileRes.data)
								that.newAudit.avatar = 'http://121.37.0.16:9000/public/'+ a.data.fileName[0]
								
								console.log(that.newAudit.avatar )
							}
						});
					}
						
				});
			},
			updateNewTeamImg(){
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						
						uni.uploadFile({
							url: 'http://121.37.0.16:8080/api/file/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let a = JSON.parse(uploadFileRes.data)
								that.newTeam.avatar = 'http://121.37.0.16:9000/public/'+ a.data.fileName[0]
							}
						});
					}
				})
			},
			submitActivity(){
				let that = this
				if(this.newAudit.endTime > this.newAudit.startTime){
					let userId = uni.getStorageSync('userInfo').id
					this.$refs.uForm.validate().then(res => {
						var event = {
							title: that.newAudit.title,
							description: that.newAudit.description,
							endTime: that.newAudit.endTime,
							eventImgUrl: that.newAudit.avatar,
							eventScore: that.newAudit.score,
							location: that.newAudit.location,
							maxNum: that.newAudit.maxNum,
							startTime: that.newAudit.startTime,
							tags: that.newAudit.tags,
							delFlag: 0,
							status: '审核中',
							userId: userId
						}
						console.log(event)
						addActivityApi(event).then(res => {
							if(res.code == 0){
								uni.$u.toast('新增成功')
								that.reset()
								that.tagsName = '活动范围'
								that.startTimeName = '开始时间'
								that.endTimeName = '结束时间'
								that.newAudit.avatar = '../../../static/updateImg.png'
							}else{
								uni.$u.toast('新增失败')
							}
						})
						
						
					}).catch(errors => {
						uni.$u.toast('校验失败')
					})
				}else{
					uni.$u.toast('时间格式错误')
				}
				
			},
			submitTeam(){
				let that = this
				this.$refs.uForm2.validate().then(res => {
					let userId = uni.getStorageSync('userInfo').id
					var team = {
						aim: that.newTeam.aim,
						teamName: that.newTeam.title,
						createBy: userId,
						maxNum: that.newTeam.maxNum,
						avatar: that.newTeam.avatar
					}
					addTeamApi(team).then(res=>{
						if(res.code == 0){
							uni.$u.toast('新增成功')
							that.reset2()
							that.newTeam.avatar = '../../../static/updateImg.png',
							that.newTeam.aim = ''
						}
					})
				})
			}
		},
		onShow() {
			let userId = uni.getStorageSync('userInfo').id
			let that = this
			that.tagsColumns = [
			    [{
			        label: '公共',
			        // 其他属性值
			        id: 0
			        // ...
			    }]
			]
			getMyTeamByUserIdApi(userId).then(res => {
				if(res.code == 0){
					that.teamList = res.data
					that.teamList.forEach(e => {
						that.tagsColumns[0].push({
							label: e.teamName,
							id: e.teamId
						})
					})
					// console.log(res.data)
				}
			})
		}
	}
</script>

<style scoped>
	.myAvatar{
		width: 100%;padding: 50% 0 50% 0;background-size: 100% 100%;
	}
</style>